<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title class="translate" data-translate-key="title">Products data management as HTML5 Web App</title>
    <link rel="shortcut icon" href="images/favicon.ico" />    
    <meta name="application-name" content="Karhu" />
    <meta name="msapplication-tooltip" content="Karhu - HTML5 Business App Demo" />
    <meta name="msapplication-window" content="width=1024;height=768" />
    <meta name="msapplication-navbutton-color" content="#000000" />
    <meta name="msapplication-starturl" content="#/products" />
    <meta name="msapplication-task"
          content="name=Products;
          action-uri=#/products;
          icon-uri=images/favicon.ico;"/>
    <meta name="msapplication-task" 
          content="name=Categories;
          action-uri=#/categories;
          icon-uri=images/favicon.ico;"/>
    <meta name="msapplication-task" 
          content="name=Add Product;
          action-uri=#/products/new;
          icon-uri=images/favicon.ico;"/>
    <meta name="msapplication-task" 
          content="name=Add Category;
          action-uri=#/categories/new;
          icon-uri=images/favicon.ico;"/>
	
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.facebox.css" />
    <link rel="stylesheet" type="text/css" href="css/screen.css" />
		
		<script type="text/javascript" src="http://use.typekit.com/ftl8zef.js"></script>
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
		
		<script type="text/javascript" src="vendor/lab/lab.js"></script>
		<script type="text/javascript">
		  $LAB
		  .script('./vendor/underscore/underscore.js')
      .script('./vendor/jquery/jquery.js').wait()
      .script('./vendor/jquery/jquery.facebox.js')
      .script('./vendor/jquery/jquery.validate.js')
      .script('./vendor/jquery/jquery.ui.js')
      .script('./vendor/jquery/jquery.ui.datepicker.en.js')
      .script('./vendor/jquery/jquery.ui.datepicker.de.js')
      .script('./vendor/jquery/jquery.global.js')
      .script('./vendor/jquery/jquery.global.de.js')
      .script('./vendor/jquery/jquery.autoresize.js')
      .script('./vendor/date/date.js')
      .script('./vendor/sha256/sha256.js')
      .script('./vendor/sammy/sammy.js').wait()
      .script('./vendor/sammy/sammy.json.js')
      .script('./vendor/sammy/sammy.mustache.js')
      .script('./vendor/sammy/sammy.nested_params.js')
      .script('./vendor/sammy/sammy.storage.js').wait()
      .script('./js/root.js').wait()
      .script('./config.js').wait()
      .script('./js/controllers/categories.js')
      .script('./js/controllers/products.js')
      .script('./js/controllers/cached_actions.js')
      .script('./js/controllers/locales.js')
      .script('./js/controllers/session.js')
      .script('./js/controllers/pages.js')
      .script('./js/models/base.js')
      .script('./js/models/product.js')
      .script('./js/models/category.js')
      .script('./js/models/session_validations.js')
      .script('./js/models/cached_lists.js')
      .script('./js/models/backend.js')
      .script('./js/models/i18n.js')
      .script('./js/views/edit_product.js')
      .script('./js/views/edit_category.js')
      .script('./js/views/queue.js')
      .script('./js/helpers/cache_helper.js')
      .script('./js/helpers/application_helper.js').wait()
      .script('./js/helpers/offline_helper.js')
      .script('./js/helpers/keyboard_helper.js')
      .script('./js/helpers/access_last_item_helper.js')
      .script('./js/helpers/custom_validators_helper.js').wait()
      .script('./js/helpers/app_filter_helper.js')
      .script('./js/helpers/sort_helper.js')
      .script('./locales/de.js')
      .script('./locales/en.js').wait()
      .script('./js/app.js');
		</script>
  </head>

  <body>	  
	  <div class="modHeaderBg">
	    <div id="flash" class="centered">
      
      </div>
  	  <div class="line centered">
  	    <header class="mod modHeader">
  	      
  	      <h1 class="logo">
  	        <a href="/">Karhu</a>
  	      </h1>
  	      <nav class="clear">
    	      <ul class="" id="languages">
              <li class="hidden">
                <a href="#/pages/keyboard_shortcuts" class="keyboard_shortcuts translate" data-translate-key="keyboard_shortcuts" data-key="k">
                  Keyboard shortcuts
                </a>
              </li>
              <li>
                <a href="#/locales/en" data-key="e">
                  English
                </a>
              </li>
              <li>
                <a href="#/locales/de" data-key="d">
                  Deutsch
                </a>
              </li>
              <li class="hidden">
                <a href="#" class="logout translate" data-translate-key="logout" data-key="l">
                  Log out
                </a>
                <form method="DELETE" action="#/session" class="hidden" id="logout_form"></form>
              </li>
            </ul>
          </nav>
  	    </header>
  	  </div>
  	</div>
  	
  	<div class="headerBottomBg">
  	  <div class="whiteBg">
  	    <div class="line centered">
    	    <div class="mod modMainNav bd">      
    	      <nav>
              <ul>
                <li>
                  <a href="#/cached-actions" class="cached-actions queue translate" data-translate-key="queue" data-key="q">
                    Queue
                  </a>
                </li>
                <li>
                  <a href="#/categories" class="categories translate" data-translate-key="categories" data-key="c">
                    Categories
                  </a>
                </li>
                <li>
                  <a href="#/products" class="products translate" data-translate-key="products" data-key="p">
                    Products
                  </a>
                </li>
              </ul>
            </nav>
    	    </div>
    	  </div>
    	</div>
  	</div>
  	
  	<div class="notices line redBordered mod">

  	  <div class="centered">
  	    

  	    
    	  <div class="actionContainer">
    	      <div class="addAction"></div>
  	        <div class="search hidden">
              <form method="GET" action="#/products">
                <span class="translate" data-translate-key="search">Search:</span>
                <input type="search" name="search" />
              </form>
            </div>

          
    	  </div>
  	    <div class="main centered"></div>
  	  </div>
	  </div>
    
      <div class="tableView">
      
      </div>
      <div class="line centered controls hidden">
        <ul class="pagination">
          
        </ul>
        <div class="pages translate" data-translate-key="pages">Pages:</div>
      </div>
      
    <footer>
      <div class="footerContainer">
        <div class="centered bd">
          <small>
            This is a Demo. Source @ <a href="http://karhu.codeplex.com/">codeplex</a>.
          </small>
        </div>
      </div>
    </footer>
    
  </body>  
</html>